<template>
  <div class="member-page">
    <!-- 顶部导航 -->
    <van-nav-bar title="个人中心" />

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <van-image
          :src="userAvatar"
          round
          width="18.67vw"
          height="18.67vw"
          class="avatar"
          @click="handleAvatarClick"
        />
        <div class="user-details">
          <template v-if="getUserInfo">
            <h3 class="username">{{ getUserInfo }}</h3>
            <p class="user-desc">{{ userDesc }}</p>
          </template>
          <template v-else>
            <h3 class="username">未登录</h3>
            <p class="user-desc">登录后享受更多功能</p>
          </template>
        </div>
        <van-icon name="arrow" class="arrow-icon" />
      </div>

      <!-- 统计信息 -->
      <div class="stats-row" v-if="getUserInfo">
        <div class="stat-item">
          <div class="stat-number">{{ userStats.practiceCount }}</div>
          <div class="stat-label">练习次数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ userStats.totalScore }}</div>
          <div class="stat-label">总分数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ userStats.studyDays }}</div>
          <div class="stat-label">学习天数</div>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
      <van-cell-group inset>
        <van-cell
          v-for="item in menuItems"
          :key="item.key"
          :title="item.title"
          :icon="item.icon"
          is-link
          @click="handleMenuClick(item)"
        >
          <template #right-icon>
            <van-badge v-if="item.badge" :content="item.badge" />
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 设置菜单 -->
    <div class="settings-section">
      <van-cell-group inset>
        <van-cell
          v-for="item in settingsItems"
          :key="item.key"
          :title="item.title"
          :icon="item.icon"
          is-link
          @click="handleSettingsClick(item)"
        />
      </van-cell-group>
    </div>

    <!-- 登录/退出按钮 -->
    <div class="action-section">
      <van-button
        v-if="!getUserInfo"
        type="primary"
        size="large"
        round
        @click="goLogin"
        class="action-button"
      >
        立即登录
      </van-button>
      <van-button
        v-else
        type="danger"
        size="large"
        round
        plain
        @click="handleLogout"
        class="action-button"
      >
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script lang="ts" setup name="MemberPage">
  import { useUserStore } from '@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { computed, reactive } from 'vue';
  import { showDialog, showToast } from 'vant';

  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    const { username = '' } = userStore.getUserInfo || {};
    return username;
  });

  const userAvatar = computed(() => {
    const { avatar = '' } = userStore.getUserInfo || {};
    return avatar || 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png';
  });

  const userDesc = computed(() => {
    return getUserInfo.value ? '推普活动学习者' : '登录后享受更多功能';
  });

  // 用户统计数据
  const userStats = reactive({
    practiceCount: 28,
    totalScore: 2580,
    studyDays: 15
  });

  // 功能菜单项
  const menuItems = [
    { key: 'practice-history', title: '练习记录', icon: 'clock-o' },
    { key: 'achievements', title: '成就徽章', icon: 'medal-o', badge: '3' },
    { key: 'favorites', title: '我的收藏', icon: 'star-o' },
    { key: 'study-plan', title: '学习计划', icon: 'calendar-o' },
    { key: 'progress', title: '学习进度', icon: 'chart-trending-o' },
  ];

  // 设置菜单项
  const settingsItems = [
    { key: 'profile', title: '个人资料', icon: 'contact' },
    { key: 'notifications', title: '消息通知', icon: 'bell' },
    { key: 'language', title: '语言设置', icon: 'globe-o' },
    { key: 'theme', title: '主题设置', icon: 'palette' },
    { key: 'about', title: '关于我们', icon: 'info-o' },
    { key: 'feedback', title: '意见反馈', icon: 'chat-o' },
  ];

  // 头像点击
  const handleAvatarClick = () => {
    if (getUserInfo.value) {
      showToast('头像设置功能开发中...');
    } else {
      goLogin();
    }
  };

  // 菜单点击处理
  const handleMenuClick = (item: any) => {
    if (!getUserInfo.value) {
      showDialog({
        title: '提示',
        message: '请先登录后使用此功能',
        confirmButtonText: '去登录',
        cancelButtonText: '取消',
      }).then(() => {
        goLogin();
      }).catch(() => {
        // 用户取消
      });
      return;
    }

    switch (item.key) {
      case 'practice-history':
        showToast('练习记录功能开发中...');
        break;
      case 'achievements':
        showToast('成就徽章功能开发中...');
        break;
      case 'favorites':
        showToast('我的收藏功能开发中...');
        break;
      case 'study-plan':
        showToast('学习计划功能开发中...');
        break;
      case 'progress':
        showToast('学习进度功能开发中...');
        break;
      default:
        showToast(`${item.title}功能开发中...`);
    }
  };

  // 设置菜单点击处理
  const handleSettingsClick = (item: any) => {
    switch (item.key) {
      case 'profile':
        if (!getUserInfo.value) {
          goLogin();
        } else {
          showToast('个人资料功能开发中...');
        }
        break;
      case 'notifications':
        showToast('消息通知功能开发中...');
        break;
      case 'language':
        showToast('语言设置功能开发中...');
        break;
      case 'theme':
        showToast('主题设置功能开发中...');
        break;
      case 'about':
        showDialog({
          title: '关于推普活动',
          message: '推普活动 v1.0.0\n\n一个专业的普通话学习平台，帮助用户提升普通话水平。',
          confirmButtonText: '确定',
        });
        break;
      case 'feedback':
        showToast('意见反馈功能开发中...');
        break;
      default:
        showToast(`${item.title}功能开发中...`);
    }
  };

  const goLogin = () => {
    router.push('/login');
  };

  const handleLogout = () => {
    showDialog({
      title: '确认退出',
      message: '确定要退出登录吗？',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      userStore.logout();
      showToast('已退出登录');
      // 不需要跳转到登录页，留在当前页面
    }).catch(() => {
      // 用户取消
    });
  };
</script>

<style scoped lang="scss">
  .member-page {
    background-color: #f5f7fa;
    min-height: 100vh;
    padding-top: 46px;
  }

  .user-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 4vw;
    border-radius: 4vw;
    padding: 6vw;
    color: white;
    box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.1);

    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 6vw;

      .avatar {
        margin-right: 4vw;
        border: 0.53vw solid rgba(255, 255, 255, 0.3);
      }

      .user-details {
        flex: 1;

        .username {
          font-size: 4.8vw;
          font-weight: 600;
          margin: 0 0 1.33vw 0;
        }

        .user-desc {
          font-size: 3.2vw;
          opacity: 0.8;
          margin: 0;
        }
      }

      .arrow-icon {
        font-size: 4vw;
        opacity: 0.6;
      }
    }

    .stats-row {
      display: flex;
      justify-content: space-around;
      padding-top: 4vw;
      border-top: 0.27vw solid rgba(255, 255, 255, 0.2);

      .stat-item {
        text-align: center;

        .stat-number {
          font-size: 5.33vw;
          font-weight: 600;
          margin-bottom: 1.33vw;
        }

        .stat-label {
          font-size: 2.93vw;
          opacity: 0.8;
        }
      }
    }
  }

  .menu-section {
    margin: 4vw;
    margin-bottom: 2vw;

    :deep(.van-cell-group) {
      border-radius: 2.67vw;
      overflow: hidden;
    }

    :deep(.van-cell) {
      padding: 4vw;
      font-size: 3.73vw;

      .van-cell__title {
        font-weight: 500;
      }

      .van-icon {
        font-size: 4.27vw;
        margin-right: 3.2vw;
        color: #1989fa;
      }
    }
  }

  .settings-section {
    margin: 4vw;
    margin-bottom: 6vw;

    :deep(.van-cell-group) {
      border-radius: 2.67vw;
      overflow: hidden;
    }

    :deep(.van-cell) {
      padding: 4vw;
      font-size: 3.73vw;

      .van-cell__title {
        font-weight: 500;
      }

      .van-icon {
        font-size: 4.27vw;
        margin-right: 3.2vw;
        color: #969799;
      }
    }
  }

  .action-section {
    padding: 0 4vw 8vw 4vw;

    .action-button {
      width: 100%;
      height: 12vw;
      font-size: 4.27vw;
      font-weight: 500;
    }
  }
</style>
